﻿
@{
    ViewBag.Title = "Tìm Trường Theo Địa Chỉ";
    Layout = "~/Views/Shared/FE/_Layout_FE_Index.cshtml";
}
<link href="@Url.Content("~/Content/FE/Addition.css")" rel="stylesheet" type="text/css" />
<style type="text/css">
    #CityID, #DistrictID, #SchoolTypeID, #Fee {
        background: none repeat scroll 0 0 padding-box rgba(255, 255, 255, 0.9);
        border-color: rgba(23, 51, 78, 0.15) rgba(23, 51, 78, 0.17) rgba(23, 51, 78, 0.2);
        border-image: none;
        border-radius: 2.5px 0 0 2.5px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 1px 0 rgba(8, 22, 37, 0.02) inset, 0 0 2px rgba(8, 22, 37, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
        padding: 5px 8px;
        width: 260px;
        margin: 15px;
        margin-bottom: 0px;
    }
    #ListService {
        line-height: 28px;
        padding: 5px 8px;
        width: 260px;
        height: 150px;
        overflow: auto;
        margin: 15px;
        border: 1px solid;
        border-color: rgba(23, 51, 78, 0.15) rgba(23, 51, 78, 0.17) rgba(23, 51, 78, 0.2);
    }
    label 
{
    font: 12px/14px Arial, Helvetica, sans-serif;
    font-weight:bold;
}
span {
   font: 12px Arial, Helvetica, sans-serif;
   color:#333333;
}
.text 
{
    border: 1px solid black;
    width:180px;
}
#txtAddress
{
    border: 3px solid #EBE6E2;
    border-radius: 5px 5px 5px 5px;
    display: block;
    float: left;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 5px;
    padding: 5px;
    transition: all 0.3s ease-out 0s;
    width: 150px;
}
#container 
{
    width:630px;
    height:415px;
    float:left;
}
#map_canvas 
{
    float:left;
    width:610px;
    height:300px;
    margin:10px;
}          
.shadow {
   -moz-box-shadow:    1px 1px 3px 1px #424345;
   -webkit-box-shadow: 1px 1px 3px 1px #424345;
   box-shadow:         1px 1px 3px 1px #424345;
}
.row{padding:10px;}
.seartitle {
border-bottom: 2px dashed #C5E0DC; 
float: left; 
padding: 10px; 
text-indent: 10px;
width: 625px;
}
.seartitle h3 {
line-height: 28px;
color: #774F38;
float: left;
font-size: 20px;
text-shadow: 0.5px 0.5px 1px rgba(154, 94, 61, 0.2);
}
#btnSearch
{
    background: none repeat scroll 0 0 padding-box rgba(255, 255, 255, 0.9);
    border-color: rgba(23, 51, 78, 0.15) rgba(23, 51, 78, 0.17) rgba(23, 51, 78, 0.2);
    border-image: none;
    border-radius: 2.5px 0 0 2.5px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(8, 22, 37, 0.02) inset, 0 0 2px rgba(8, 22, 37, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
    padding: 6px 8px;
    cursor:pointer;
}
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?libraries=geometry&v=3.9&sensor=true">
</script>
<script type="text/javascript">
    var map;
    $(document).ready(function () {

        //draw a map centered at Empire State Building Newyork
        var latlng = new google.maps.LatLng(21.028333, 105.843333);
        var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        $("#btnSearch").click(function () {
            //Convert Address Into LatLng and Retrieve Address Near by
            convertAddressToLatLng($("#txtAddress").val());
        });
    });

    function convertAddressToLatLng(address) {
        var geocoder = new google.maps.Geocoder();

        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                //Empty div before re-populating
                $("#divStores").html('');
                searchStores(results[0].geometry.location);
            } else {
                $("#divStores").html(getEmbedHTML('Không tìm thấy cho vị trí này', '', ''));
            }
        });
    }

    function searchStores(location) {
        var latlng = new google.maps.LatLng(location.lat(), location.lng());
        var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        //Marker at the address typed in
        var image = '@Url.Content("~/Content/FE/images/townhouse.png")'
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: image
        });
        for (var city in marker) {
            var circle = new google.maps.Circle({
                map: map,
                radius: 2000,
                strokeColor: '#FF0000',
                strokeOpacity: 0.009,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.005
            });
            circle.bindTo('center', marker, 'position');
            var circleLatLng = circle.getBounds();
        }

        //hard coded the radius to 2 km, if you get the value from a field if required
        var parameters = 'lat=' + location.lat() + '&lng=' + location.lng() + '&radius=2';

        var url = '/School/MapControl?' + parameters;
        $.getJSON(url, { ajax: 'true' }, function (response) {
            var result = response.Result;
            if (result == 'OK') {
                var rows = response.Options;
                if (rows.length > 0) {
                    for (i = 0; i < rows.length; i++) {
                        //Append Store Address on Sidebar
                        var html = getEmbedHTML(rows[i].SchoolName, rows[i].Address);
                        $("#divStores").append(html);
                        //place a marker
                        var splitGGAPI = rows[i].GoogleAPI.split(",", 2);
                        var image = '@Url.Content("~/Content/FE/images/beachflag.png")';
                        var latlng10 = new google.maps.LatLng(splitGGAPI[0], splitGGAPI[1]);
                        var marker = new google.maps.Marker({
                            position: latlng10,
                            map: map,
                            icon: image
                        });

                        var msg = 'Trường: <b>' + rows[i].SchoolName + '</b><br/> ';
                        msg = msg + 'Địa chỉ: ' + rows[i].Address + '<br/> ';
                        attachMessage(marker, msg);
                    }
                } else {
                    $("#divStores").html(getEmbedHTML('Không tìm thấy kết quả', '', ''));
                }
            }
        });
    }

    function attachMessage(marker, msg) {
        var infowindow = new google.maps.InfoWindow({
            content: msg,
            size: new google.maps.Size(120, 150)
        });
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker);
        });
    }

    function getEmbedHTML(SchoolName, Address) {
        var strhtml = '<div class="row">';
        strhtml = strhtml + '<label>' + SchoolName + '</label><br/>';
        strhtml = strhtml + '<span>' + Address + '<span><br/>';
        //strhtml = strhtml + '<span> Khoảng cách: ' + parseFloat(distance).toFixed(2) + ' km<span><br/>';
        strhtml = strhtml + '</div><div class="separator"></div>';

        return strhtml;
    }
</script>
<div class="allhome">
    <div class="dashboard">
        <div class="content-header">
            <div class="header-inner">
        <script type="text/javascript">
            $(document).ready(function () {
                var cboCity = $(document).find('select[name="CityID"]');
                var divListService = $(document).find('div[name="ListService"]');
                var cboType = $(document).find('select[name="SchoolTypeID"]');
                cboCity.ready(function (e) {
                    var cid = cboCity.val();
                    // Load district Combo by cityID
                    var url2 = '@Url.Action("GetCityOptionsByGet", "Function")';
                    $.getJSON(url2, { ajax: 'true' }, function (response) {
                        var result = response.Result;
                        var options = '<option value="0">-- Tất cả thành phố --</option>';
                        cboCity.html(options);
                        if (result == 'OK') {
                            var rows = response.Options;
                            for (var k = 0; k < rows.length; k++) {
                                options += '<option value="' + rows[k].Value + '">' +
                                    rows[k].DisplayText + '</option>';
                            }
                        }
                        cboCity.html(options);
                    });
                });

                cboType.ready(function (e) {
                    var cid = cboCity.val();
                    // Load district Combo by cityID
                    var url2 = '@Url.Action("GetSchoolTypeOptionsByGet", "Function")';
                    $.getJSON(url2, { ajax: 'true' }, function (response) {
                        var result = response.Result;
                        var options = '<option value="0">-- Tất cả loại trường --</option>';
                        cboType.html(options);
                        if (result == 'OK') {
                            var rows = response.Options;
                            for (var k = 0; k < rows.length; k++) {
                                options += '<option value="' + rows[k].Value + '">' +
                                    rows[k].DisplayText + '</option>';
                            }
                        }
                        cboType.html(options);
                    });
                });

                divListService.ready(function (e) {
                    var cid = cboCity.val();
                    // Load district Combo by cityID
                    var url2 = '@Url.Action("GetServiceCheckListByGet", "Function")';
                    $.getJSON(url2, { ajax: 'true' }, function (response) {
                        var result = response.Result;
                        var options = '';
                        if (result == 'OK') {
                            var rows = response.Options;
                            for (var k = 0; k < rows.length; k++) {
                                options += '<div><input type="checkbox" id="ServiceID" name="ServiceID" value="' + rows[k].Value + '">    ' +
                                    rows[k].DisplayText + "</div>";
                            }
                        }
                        divListService.html(options);
                    });
                });
                var cboLine = $(document).find('select[name="DistrictID"]');

                // City ComboBox Change
                cboCity.change(function (e) {
                    var cid = $(this).val();
                    if (cid == 0) {
                        cboLine.hide();
                        return;
                    }
                    // Refresh District Combo
                    var url = '@Url.Action("GetDistrictOptions", "Function")' + '?cityId=' + cid;
                    $.getJSON(url, { ajax: 'true' }, function (response) {
                        var result = response.Result;
                        var options = '<option value="0">-- Tất cả quận huyện --</option>';

                        cboLine.html(options);
                        if (result == 'OK') {
                            var rows = response.Options;
                            for (var i = 0; i < rows.length; i++) {
                                options += '<option value="' + rows[i].Value + '">' +
                                    rows[i].DisplayText + '</option>';
                            }
                        }
                        cboLine.html(options);
                        cboLine.show();
                        cboLine.change();
                    });

                });
            });
        </script>
        <div class="rightTxt1" id="search_01" style="position: relative; ">
            <form class="search-condition" action="@Url.Action("SearchConditionResult","School")" method="GET" style="padding: 10px;">
                <p>Lựa chọn những tiêu chí phù hợp dưới đây</p>
                    <select id="CityID" name="CityID">
                    </select>
                <select id="DistrictID" name="DistrictID" style="display: none;">
                    <option value="0">-- Tất cả Quận Huyện --</option>
                </select>
                    <select id="SchoolTypeID" name="SchoolTypeID">
                    </select>
                    <select id="Fee" name="Fee">
                        <option value="1">-- Tất Cả Mức Học Phí (VNĐ) --</option>
                        <option value="2">Dưới 1.000.000</option>
                        <option value="3">1.000.000-2.000.000</option>
                        <option value="4">2.100.000-3.000.000</option>
                        <option value="5">3.100.000-4.000.000</option>
                        <option value="6">4.100.000-5.000.000</option>
                        <option value="7">Trên 5.000.000</option>
                    </select>
                
                    <div id="ListService" name="ListService">
                    
                    </div>
                <input type="submit" value="Tìm Kiếm" id="search1"/>
            </form>
        </div>
    </div>
      </div>
    </div>

    <!---BEGIN Search Nearby Form--->
    <div id="container" class="shadow">
        <div class="seartitle">
        <div style="float:left;">
            <h3>+ Tìm theo ĐỊA ĐIỂM +</h3>
        </div>
        <div style="float:right;">
            <input type="text" value="" id="txtAddress" placeholder="Nhập từ khóa để tìm kiếm" style="width: 250px;"/>
            <br />
            <input type="submit" id="btnSearch" value="Tìm kiếm" />
        </div>
        
        </div>
		<div id="divStores"></div>
        <div id="map_canvas"></div>
    </div>
</div>